import styled from 'styled-components'

export const SongItemWrapper = styled.div`
  width: 140px;
  height: 204px;
  margin-bottom: 30px;
  margin-left: 42px;
  cursor: pointer;
  .header_item {
    position: relative;
    .image {
      width: 140px;
    }

    .image_cmask {
      position: absolute;
      top: 0;
      left: 0;
      width: 140px;
      height: 140px;
      background-position: 0 0;
    }

    .button_mask {
      width: 140px;
      height: 27px;
      color: #ccc;
      position: absolute;
      left: 0;
      bottom: 0;
      background-position: 0 -539px;
      > .left {
        display: flex;
        align-items: center;
        .icon_headset {
          width: 14px;
          height: 11px;
          display: inline-block;
          background-position: 0 -24px;
          margin: 9px 5px 9px 10px;
        }
      }
      > .right {
        .icon_play {
          position: absolute;
          right: 10px;
          bottom: 5px;
          width: 16px;
          height: 17px;
          background-position: 0 0;
        }
      }
    }
  }
  .item_name {
    display: inline-block;
    color: #000;
    text-indent: 2em;
    margin-top: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }
`
